<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <link rel="Shortcut Icon" href="../images/aecc.ico" type="image/x-icon" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="../StaticFiles/element-ui/element-ui.css">
  <link rel="stylesheet" href="../StaticFiles/nprogress/nprogress.min.css">
  <link rel="stylesheet" href="../styles/vue-page-common.css">
  <script src="../Scripts/vue.min.js"></script>
  <script src="../StaticFiles/element-ui/element-ui.js"></script>
  <script src="../Scripts/axios.min.js"></script>
  <script src="../StaticFiles/nprogress/nprogress.min.js"></script>
  <script src="../Scripts/dayjs.min.js"></script>
  <script src="../Scripts/axios.config.js"></script>
  <title>月度生产作业计划看板</title>
  <style>
    .el-progress__text {
      font-size: 12px !important;
    }

    .chart {
      height: 277px;
      border: 1px solid #409EFF;
      margin: 10px;
    }

    .red {
      color: red;
    }
  </style>
</head>

<body>
  <div id="app" v-cloak v-on:keyup.enter="getData">
    <el-row class="header">
      <el-col :span="6"><img src="../images/aeec_logo.png" height="60" alt="黎阳LOGO" /></el-col>
      <el-col :span="12" class="header-title">月度生产作业计划看板</el-col>
      <el-col :span="6" class="currentTime">{{currentTime}}</el-col>
    </el-row>

    <el-row>
      <!-- 左侧 -->
      <el-col :span="19" style="padding:10px;">
        <!-- 查询条件区 -->
        <el-form :inline="true" :model="queryInfo" ref="queryInfoRef" :label-position="'left'" :rules="rules">
          <el-form-item label="主制分厂:">
            <el-select v-model="queryInfo.factoryid" placeholder="请选择主制分厂" filterable @change="bindControl"
              :disabled="factoryDisabled" style="width: 180px;">
              <el-option v-for="f in factoryList" :key="f.factoryid" :label="f.factoryname" :value="f.factoryid">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="主制工区:">
            <el-select v-model="queryInfo.workcenterid" placeholder="请选择主制工区" clearable filterable
              @change="workcenterSelectChange" style="width: 180px;">
              <el-option v-for="i in workcenterList" :key="i.workcenterid" :label="i.workcentername"
                :value="i.workcenterid">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="当前班组:">
            <el-select v-model="queryInfo.teamid" placeholder="请选择" clearable filterable style="width: 180px;">
              <el-option v-for="i in teamList" :key="i.teamid" :label="i.teamname" :value="i.teamid"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item prop='mfgordername' label="订单号:">
            <el-autocomplete v-model.trim="queryInfo.mfgordername" placeholder="请输入订单号" :trigger-on-focus="false"
              :fetch-suggestions="searchMfgorderAsync" :value-key="'mfgordername'" :debounce="500" style="width:200px;">
            </el-autocomplete>
          </el-form-item>

          <el-form-item label="批次状态:">
            <el-select v-model="queryInfo.status" filterable style="width:100px;">
              <el-option :key="'全部'" :label="'全部'" :value="'全部'"></el-option>
              <el-option :key="'未完成'" :label="'未完成'" :value="'未完成'"></el-option>
              <el-option :key="'已完成'" :label="'已完成'" :value="'已完成'"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item prop='productname' label="零件图号:">
            <el-autocomplete v-model.trim="queryInfo.productname" placeholder="请输入零件图号" :trigger-on-focus="false"
              :fetch-suggestions="searchProductAsync" :value-key="'productname'" :debounce="500">
            </el-autocomplete>
          </el-form-item>

          <el-form-item prop='containername' label="流水卡号:">
            <el-autocomplete v-model.trim="queryInfo.containername" placeholder="请输入流水卡号" :trigger-on-focus="false"
              :fetch-suggestions="searchContainerAsync" :value-key="'containername'" :debounce="500">
            </el-autocomplete>
          </el-form-item>

          <el-form-item label="订单计划完成时间:" prop="selecteddate">
            <el-date-picker v-model="queryInfo.selecteddate" type="daterange" range-separator="至"
              value-format="yyyy-MM-dd" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
            </el-date-picker>
          </el-form-item>

          <el-form-item label="遗留订单:">
            <el-switch v-model="queryInfo.showHistory" active-text="是" inactive-text="否">
            </el-switch>
          </el-form-item>

          <el-form-item label="遗留订单筛选时间:" v-show="queryInfo.showHistory">
            <el-date-picker v-model="queryInfo.historyOrderDate" type="daterange" range-separator="至"
              value-format="yyyy-MM-dd" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="small" v-show="queryInfo.showHistory"
              @click="getHistoryOrder">遗留订单
            </el-button>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="small" @click="handlerBtnSearch">查询</el-button>
            <el-button type="primary" icon="el-icon-download" size="small" @click="getExportExcel">导出</el-button>
            <el-button type="primary" icon="el-icon-s-data" size="small" @click="getStepPlanRateLine">本月排产完成率
            </el-button>
          </el-form-item>
        </el-form>

        <!-- 表格显示区 -->
        <el-table v-loading="loading" v-loading.fullscreen.lock="loading" :element-loading-text="loadingText"
          element-loading-background="rgba(0,0,0,0.7)" :data="dataList" stripe border>
          <el-table-column type="index" width="40px"></el-table-column>
          <el-table-column label="订单号" prop="mfgordername" width="115" show-overflow-tooltip></el-table-column>
          <el-table-column label="主制分厂" prop="factoryname" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column label="主制工区" prop="fromworkcentername" width="90" show-overflow-tooltip></el-table-column>
          <el-table-column label="当前班组" prop="teamname" width="90" show-overflow-tooltip></el-table-column>
          <el-table-column label="流水卡号" prop="containername" show-overflow-tooltip></el-table-column>
          <el-table-column label="当前工序" prop="workflowstepname" width="120" show-overflow-tooltip></el-table-column>
          <el-table-column label="开始时间" prop="plannedstartdate" width="95" :formatter="splitDate"></el-table-column>
          <el-table-column label="完工时间" prop="plannedcompletiondate" width="95" :formatter="splitDate">
          </el-table-column>
          <el-table-column label="状态" prop="status" width="92">
            <template slot-scope="scope" v-if="scope.row.status">
              <el-tag v-if="scope.row.status === '超期未完'" type="danger">超期未完</el-tag>
              <el-tag v-else-if="scope.row.status === '未完成'" type="warning">未完成</el-tag>
              <el-tag v-else type="success">已完成</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="工序完成百分比" width="115">
            <template slot-scope="scope">
              <el-progress :percentage='scope.row.specrate' :stroke-width="8"
                :color="customColorMethod(scope.row.status)" class="red">
              </el-progress>
            </template>
          </el-table-column>
          <el-table-column label="工时完成百分比" width="115">
            <template slot-scope="scope">
              <el-progress :percentage='scope.row.worktimerate' :stroke-width="8"
                :color="customColorMethod(scope.row.status)" class="red">
              </el-progress>
            </template>
          </el-table-column>
          <el-table-column label="其他信息" width="75">
            <template slot-scope="scope">
              <el-popover trigger="click" placement="top">
                <p><i class="el-icon-info" style="margin-right: 5px;"></i>订单数量: {{scope.row.mfgorderqty}}</p>
                <p><i class="el-icon-info" style="margin-right: 5px;"></i>型号: {{scope.row.familylistnames}}</p>
                <p><i class="el-icon-info" style="margin-right: 5px;"></i>零件图号: {{scope.row.productname}}</p>
                <p><i class="el-icon-info" style="margin-right: 5px;"></i>零件名称: {{scope.row.productdesc}}</p>
                <p><i class="el-icon-info" style="margin-right: 5px;"></i>批次数量: {{scope.row.qty}}</p>
                <div slot="reference">
                  <el-tag style="cursor: pointer;">查看</el-tag>
                </div>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="70">
            <template slot-scope="scope">
              <el-button type="primary" icon="el-icon-refresh" size="mini"
                @click="updateContainerFinishInfo(scope.row)">
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="queryInfo.currentPage" :page-sizes="[12,50,100]" :page-size="queryInfo.pageSize"
          layout="prev,pager,next,jumper,sizes,total" :total="total">
        </el-pagination>

        <!-- 回到顶部 -->
        <el-backtop></el-backtop>
      </el-col>
      <!-- 右侧 -->
      <el-col :span="5">
        <div id="month" class="chart"></div>
        <div id="week" class="chart"></div>
        <div id="today" class="chart"></div>
      </el-col>

      <!-- 本月未完成订单统计 -->
      <el-dialog :title="thisMonthNotFinishDialogTitle" :width="'50%'" :center="true"
        :visible.sync="thisMonthNotFinishDialogVisiable" @opened="thisMonthNotFinishDialogOpend">
        <div id="thisMonthNotFinishChart" style="height: 500px;"></div>
      </el-dialog>

      <!-- 本月未完成订单统计明细 -->
      <el-dialog :title="thisMonthNotFinishChartDetail.title" :width="'98%'" :top="'10px'" :center="true"
        :visible.sync="thisMonthNotFinishChartDetail.dialogVisiable">
        <el-table v-loading="loading" v-loading.fullscreen.lock="loading" :element-loading-text="loadingText"
          element-loading-background="rgba(0,0,0,0.8)" :data="thisMonthNotFinishChartDetail.dataList" stripe border>
          <el-table-column type="index" width="50"></el-table-column>
          <el-table-column label="订单号" prop="mfgordername" width="115" show-overflow-tooltip></el-table-column>
          <el-table-column label="订单数" prop="mfgorderqty" width="60"></el-table-column>
          <el-table-column label="主制分厂" prop="factoryname" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column label="流水卡号" prop="containername" show-overflow-tooltip></el-table-column>
          <el-table-column label="数量" prop="qty" width="50" show-overflow-tooltip></el-table-column>
          <el-table-column label="当前工序" prop="workflowstepname" width="120" show-overflow-tooltip></el-table-column>
          <el-table-column label="开始时间" prop="plannedstartdate" width="95" :formatter="splitDate"></el-table-column>
          <el-table-column label="完工时间" prop="plannedcompletiondate" width="95" :formatter="splitDate">
          </el-table-column>
          <el-table-column label="状态" prop="status" width="100">
            <template slot-scope="scope" v-if="scope.row.status">
              <el-tag v-if="scope.row.status === '超期未完'" type="danger">超期未完</el-tag>
              <el-tag v-else-if="scope.row.status === '未完成'" type="warning">未完成</el-tag>
              <el-tag v-else type="success">已完成</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="工序完成百分比" width="115">
            <template slot-scope="scope">
              <el-progress :percentage='scope.row.specrate' :stroke-width="8"
                :color="customColorMethod(scope.row.status)" class="red">
              </el-progress>
            </template>
          </el-table-column>
          <el-table-column label="工时完成百分比" width="115">
            <template slot-scope="scope">
              <el-progress :percentage='scope.row.worktimerate' :stroke-width="8"
                :color="customColorMethod(scope.row.status)" class="red">
              </el-progress>
            </template>
          </el-table-column>
          <el-table-column label="主制工区" prop="fromworkcentername" width="90" show-overflow-tooltip></el-table-column>
          <el-table-column label="型号" prop="familylistnames" width="80" show-overflow-tooltip></el-table-column>
          <el-table-column label="操作" width="100">
            <template slot-scope="scope">
              <el-button type="primary" icon="el-icon-download" size="mini"
                @click="exportThisMonthNotFinishChartDetails">
                导出
              </el-button>
            </template>
          </el-table-column>
          <el-table-column label="其他信息" width="75">
            <template slot-scope="scope">
              <el-popover trigger="hover" placement="top">
                <p><i class="el-icon-info" style="margin-right: 5px;"></i>零件图号: {{scope.row.productname}}</p>
                <p><i class="el-icon-info" style="margin-right: 5px;"></i>零件名称: {{scope.row.productdesc}}</p>
                <div slot="reference">
                  <el-tag style="cursor: pointer;">查看</el-tag>
                </div>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="70">
            <template slot-scope="scope">
              <el-button type="primary" icon="el-icon-refresh" size="mini"
                @click="updateContainerFinishInfo(scope.row)">
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination @current-change="handleThisMonthNotFinishChartDetailsCurrentChange"
          :current-page="thisMonthNotFinishChartDetail.queryInfo.currentPage"
          :page-sizes="[thisMonthNotFinishChartDetail.queryInfo.pageSize]"
          :page-size="thisMonthNotFinishChartDetail.queryInfo.pageSize" layout="prev,pager,next,jumper,sizes,total"
          :total="thisMonthNotFinishChartDetail.total">
        </el-pagination>
      </el-dialog>

      <!-- 本周完成情况 -->
      <el-dialog :title="thisWeek.title" :width="'98%'" :top="'10px'" :center="true"
        :visible.sync="thisWeek.dialogVisiable">
        <!-- 本周完成情况表各明细 -->
        <el-table v-loading="loading" v-loading.fullscreen.lock="loading" :element-loading-text="loadingText"
          element-loading-background="rgba(0,0,0,0.8)" :data="thisWeek.dataList" stripe border>
          <el-table-column type="index" width="50"></el-table-column>
          <el-table-column label="订单号" prop="mfgordername" width="115" show-overflow-tooltip></el-table-column>
          <el-table-column label="订单数" prop="mfgorderqty" width="60"></el-table-column>
          <el-table-column label="主制分厂" prop="factoryname" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column label="流水卡号" prop="containername" show-overflow-tooltip></el-table-column>
          <el-table-column label="数量" prop="qty" width="50" show-overflow-tooltip></el-table-column>
          <el-table-column label="当前工序" prop="workflowstepname" width="120" show-overflow-tooltip></el-table-column>
          <el-table-column label="开始时间" prop="plannedstartdate" width="95" :formatter="splitDate"></el-table-column>
          <el-table-column label="完工时间" prop="plannedcompletiondate" width="95" :formatter="splitDate">
          </el-table-column>
          <el-table-column label="状态" prop="status" width="100">
            <template slot-scope="scope" v-if="scope.row.status">
              <el-tag v-if="scope.row.status === '超期未完'" type="danger">超期未完</el-tag>
              <el-tag v-else-if="scope.row.status === '未完成'" type="warning">未完成</el-tag>
              <el-tag v-else type="success">已完成</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="工序完成百分比" width="115">
            <template slot-scope="scope">
              <el-progress :percentage='scope.row.specrate' :stroke-width="8"
                :color="customColorMethod(scope.row.status)" class="red">
              </el-progress>
            </template>
          </el-table-column>
          <el-table-column label="工时完成百分比" width="115">
            <template slot-scope="scope">
              <el-progress :percentage='scope.row.worktimerate' :stroke-width="8"
                :color="customColorMethod(scope.row.status)" class="red">
              </el-progress>
            </template>
          </el-table-column>
          <el-table-column label="主制工区" prop="fromworkcentername" width="90" show-overflow-tooltip></el-table-column>
          <el-table-column label="型号" prop="familylistnames" width="80" show-overflow-tooltip></el-table-column>
          <el-table-column label="操作" width="100">
            <template slot-scope="scope">
              <el-button type="primary" icon="el-icon-download" size="mini" @click="exportThisWeekDetail">
                导出
              </el-button>
            </template>
          </el-table-column>
          <el-table-column label="其他信息" width="75">
            <template slot-scope="scope">
              <el-popover trigger="hover" placement="top">
                <p><i class="el-icon-info" style="margin-right: 5px;"></i>零件图号: {{scope.row.productname}}</p>
                <p><i class="el-icon-info" style="margin-right: 5px;"></i>零件名称: {{scope.row.productdesc}}</p>
                <div slot="reference">
                  <el-tag style="cursor: pointer;">查看</el-tag>
                </div>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="70">
            <template slot-scope="scope">
              <el-button type="primary" icon="el-icon-refresh" size="mini"
                @click="updateContainerFinishInfo(scope.row)">
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination @current-change="handleThisWeekCurrentChange" :current-page="thisWeek.queryInfo.currentPage"
          :page-sizes="[thisWeek.queryInfo.pageSize]" :page-size="thisWeek.queryInfo.pageSize"
          layout="prev,pager,next,jumper,sizes,total" :total="thisWeek.total">
        </el-pagination>
      </el-dialog>

      <!-- 今日完成情况 -->
      <el-dialog :title="todayDetail.title" :width="'98%'" :top="'10px'" :center="true"
        :visible.sync="todayDetail.dialogVisiable">
        <!-- 今日完成情况表各明细 -->
        <el-table v-loading="loading" v-loading.fullscreen.lock="loading" :element-loading-text="loadingText"
          element-loading-background="rgba(0,0,0,0.8)" :data="todayDetail.dataList" stripe border>
          <el-table-column type="index" width="50"></el-table-column>
          <el-table-column label="订单号" prop="mfgordername" width="160"></el-table-column>
          <el-table-column label="主制分厂" prop="factoryname" width="140" show-overflow-tooltip></el-table-column>
          <el-table-column label="主制工区" prop="fromworkcentername" width="120" show-overflow-tooltip></el-table-column>
          <el-table-column label="流水卡号" prop="containername"></el-table-column>
          <el-table-column label="工序号" prop="sequence" width="60"></el-table-column>
          <el-table-column label="排产工序" prop="workflowstepname"></el-table-column>
          <el-table-column label="计划完成时间" prop="plandate" width="100" :formatter="splitDate"></el-table-column>
          <el-table-column label="实际完成时间" prop="checkdate" width="150" :formatter="replaceDate"></el-table-column>
          <el-table-column label="完工状态" prop="status" width="100">
            <template slot-scope="scope" v-if="scope.row.status">
              <el-tag v-if="scope.row.status === '已完工'" type="success">已完工</el-tag>
              <el-tag v-else type="danger">未完工</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="100">
            <template slot-scope="scope">
              <el-button type="primary" icon="el-icon-download" size="mini" @click="exportTodayDetail">
                导出
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-pagination @current-change="handleTodayCurrentChange" :current-page="todayDetail.queryInfo.currentPage"
          :page-sizes="[todayDetail.queryInfo.pageSize]" :page-size="todayDetail.queryInfo.pageSize"
          layout="prev,pager,next,jumper,sizes,total" :total="todayDetail.total">
        </el-pagination>
      </el-dialog>

      <!-- 排产完成率折线图 -->
      <el-dialog title="本月排产率完成情况" :width="'98%'" :top="'10px'" :center="true" :visible.sync="lineChartDialogVisiable"
        @opened="lineChartDialogOpened">
        <div id="line-chart" style="width:100%;height:780px;"></div>
      </el-dialog>

      <!-- 遗留订单统计 -->
      <el-dialog :title="historyOrderDialogTitle" :visible.sync="historyOrderDialogVisiable" :center="true"
        :width="'50%'" @opened="historyOrderDialogOpend">
        <div id="historyOrderChart" style="height: 500px;"></div>
      </el-dialog>

      <!-- 遗留订单明细 -->
      <el-dialog :title="historyOrderDetail.title" :width="'98%'" :top="'10px'"
        :visible.sync="historyOrderDetail.dialogVisiable">
        <el-table v-loading="loading" v-loading.fullscreen.lock="loading" :element-loading-text="loadingText"
          element-loading-background="rgba(0,0,0,0.8)" :data="historyOrderDetail.dataList" stripe border>
          <el-table-column type="index" width="50"></el-table-column>
          <el-table-column label="订单号" prop="mfgordername" width="115" show-overflow-tooltip></el-table-column>
          <el-table-column label="订单数" prop="mfgorderqty" width="60"></el-table-column>
          <el-table-column label="主制分厂" prop="factoryname" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column label="流水卡号" prop="containername" show-overflow-tooltip></el-table-column>
          <el-table-column label="数量" prop="qty" width="50" show-overflow-tooltip></el-table-column>
          <el-table-column label="当前工序" prop="workflowstepname" width="120" show-overflow-tooltip></el-table-column>
          <el-table-column label="开始时间" prop="plannedstartdate" width="95" :formatter="splitDate"></el-table-column>
          <el-table-column label="完工时间" prop="plannedcompletiondate" width="95" :formatter="splitDate">
          </el-table-column>
          <el-table-column label="状态" prop="status" width="100">
            <template slot-scope="scope" v-if="scope.row.status">
              <el-tag v-if="scope.row.status === '超期未完'" type="danger">超期未完</el-tag>
              <el-tag v-else-if="scope.row.status === '未完成'" type="warning">未完成</el-tag>
              <el-tag v-else type="success">已完成</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="工序完成百分比" width="115">
            <template slot-scope="scope">
              <el-progress :percentage='scope.row.specrate' :stroke-width="8"
                :color="customColorMethod(scope.row.status)" class="red">
              </el-progress>
            </template>
          </el-table-column>
          <el-table-column label="工时完成百分比" width="115">
            <template slot-scope="scope">
              <el-progress :percentage='scope.row.worktimerate' :stroke-width="8"
                :color="customColorMethod(scope.row.status)" class="red">
              </el-progress>
            </template>
          </el-table-column>
          <el-table-column label="主制工区" prop="fromworkcentername" width="90" show-overflow-tooltip></el-table-column>
          <el-table-column label="型号" prop="familylistnames" width="80px" show-overflow-tooltip></el-table-column>
          <el-table-column label="操作" width="100px;">
            <template slot-scope="scope">
              <el-button type="primary" icon="el-icon-download" size="mini" @click="exportHistoryOrderDetails">
                导出
              </el-button>
            </template>
          </el-table-column>
          <el-table-column label="其他信息" width="75">
            <template slot-scope="scope">
              <el-popover trigger="hover" placement="top">
                <p><i class="el-icon-info" style="margin-right: 5px;"></i>零件图号: {{scope.row.productname}}</p>
                <p><i class="el-icon-info" style="margin-right: 5px;"></i>零件名称: {{scope.row.productdesc}}</p>
                <div slot="reference">
                  <el-tag style="cursor: pointer;">查看</el-tag>
                </div>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="70">
            <template slot-scope="scope">
              <el-button type="primary" icon="el-icon-refresh" size="mini"
                @click="updateContainerFinishInfo(scope.row)">
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination @current-change="handleHistoryOrderDetailsCurrentChange"
          :current-page="historyOrderDetail.queryInfo.currentPage" :page-sizes="[historyOrderDetail.queryInfo.pageSize]"
          :page-size="historyOrderDetail.queryInfo.pageSize" layout="prev,pager,next,jumper,sizes,total"
          :total="historyOrderDetail.total">
        </el-pagination>
      </el-dialog>

    </el-row>
  </div>
  <script src="../Scripts/echarts/echarts-5.4.0.min.js"></script>
  <script type="module">
    import { getParams, fetchSuggestion, exportExcelData } from '../Scripts/hooks/useCommonMethod.js'
    import { barOption, pieOption, colorList } from '../Scripts/hooks/chartConfig.js'
    import { getUserInfo, getFactoryListByCode, getWorkcenterList, getTeamList } from '../Scripts/hooks/fetchAPI.js'
    import { prevWeek, thisWeek, nextWeek, prevMonth, thisMonth, nextMonth } from '../Scripts/hooks/useDateShortCut.js'
    import { splitDate, replaceDate } from '../Scripts/hooks/format.js'
    const app = new Vue({
      el: '#app',
      data: {
        splitDate, replaceDate,
        queryInfo: {
          factoryid: '',
          workcenterid: '',
          teamid: '',
          productname: '',
          mfgordername: '',
          containername: '',
          status: '全部',
          selecteddate: '',// 日期范围
          thismonth: '',
          today: '',
          showHistory: false,// 是否显示遗留订单
          historyOrderDate: '',//遗留订单计划完成时间
          currentPage: 1,//当前页
          pageSize: 12//每页显示条数
        },
        currentTime: '',
        total: 0,
        loading: false,
        loadingText: '数据加载中...',
        dataList: [],
        factoryList: [],
        workcenterList: [],
        teamList: [],
        userInfo: {},
        factoryDisabled: false,
        // 本周完成情况明细
        thisWeek: {
          dialogVisiable: false,
          queryInfo: { iscomplete: '', currentPage: 1, pageSize: 12 },
          dataList: [], total: 0, title: ''
        },
        // 今日完成情况明细
        todayDetail: {
          dialogVisiable: false,
          queryInfo: { iscomplete: '', currentPage: 1, pageSize: 12 },
          dataList: [], total: 0, title: ''
        },
        lineChartTitle: '',
        lineChartDialogVisiable: false,// 排产完成情况对话框
        thisMonthNotFinishDialogTitle: '',//本月未完成订单统计--对话框标题
        thisMonthNotFinishDialogVisiable: false,//本月未完成订单统计--对话框隐藏
        // 本月未完成订单统计明细
        thisMonthNotFinishChartDetail: {
          dialogVisiable: false,
          queryInfo: { status: '', title: '', currentPage: 1, pageSize: 12 },
          dataList: [], total: 0, title: ''
        },
        historyOrderDialogTitle: '各分厂遗留未完成订单批次统计',//遗留订单统计--对话框标题
        historyOrderDialogVisiable: false,//遗留订单统计--对话框隐藏
        // 遗留订单统计明细
        historyOrderDetail: {
          dialogVisiable: false,
          queryInfo: { factoryname: '', title: '', currentPage: 1, pageSize: 12 },
          dataList: [], total: 0, title: ''
        },
        // 表单验证
        rules: { selecteddate: [{ required: true, message: '日期范围不能为空', trigger: 'change' }] },
        loadingConfig: { text: '数据查询中...', effect: 'whirling', maskColor: 'transparent', textColor: '#000', color: '#66b1ff' },
        pickerOptions: { shortcuts: [prevWeek, thisWeek, nextWeek, prevMonth, thisMonth, nextMonth] }
      },
      methods: {
        // 查询订单号
        searchMfgorderAsync(value, callback) {
          fetchSuggestion({ actionName: 'getMfgordernameAsync', name: 'mfgordername', value, callback });
        },
        // 查询件号
        searchProductAsync(value, callback) {
          fetchSuggestion({ actionName: 'getProductnameAsync', name: 'productname', value, callback });
        },
        // 查询批次号
        searchContainerAsync(value, callback) {
          fetchSuggestion({ actionName: 'getContainernameAsync', name: 'containername', value, callback });
        },
        // 分厂变更绑定工区/班组
        async bindControl(val) {
          this.queryInfo.workcenterid = null;
          this.queryInfo.teamid = null;
          if (val) {
            this.workcenterList = await getWorkcenterList({ factoryid: val });
            const { factoryid, workcenterid } = this.queryInfo;
            this.teamList = await getTeamList({ factoryid, workcenterid });
          }
        },
        async workcenterSelectChange(val) {
          if (val) {
            this.queryInfo.teamid = null;
            const { factoryid } = this.queryInfo;
            this.teamList = await getTeamList({ factoryid, workcenterid: val });
          }
        },
        // 设置进度条颜色
        customColorMethod(status) {
          if (status === '已完成') {
            return '#67c23a';
          } else if (status === '未完成') {
            return '#e6a23c';
          } else {
            return '#f56c6c';
          }
        },
        handlerBtnSearch() {
          this.$refs['queryInfoRef'].validate((valid) => {
            if (valid) {
              this.getData();
              this.getMonthData();
              this.getWeekData();
              this.getTodayData();
            } else {
              return this.$message.error('必填项不能为空');
            }
          })
        },
        // 查询数据
        async getData() {
          this.$refs['queryInfoRef'].validate(async (valid) => {
            if (!valid) {
              return this.$message.error('必填项不能为空');
            } else {
              this.loading = true;
              this.loadingText = '数据加载中...';
              const { data: { data, meta, total } } = await axios.post('../handler/board/MfgorderContainerFinishInfoDashBoard.ashx?action=getData', {
                type: 'getData',
                ...this.queryInfo
              })
              this.loading = false;
              if (meta.status === 500) { return this.$message.error(meta.msg); }
              this.dataList = data;
              this.total = total;
            }
          })
        },
        // 遗留订单统计明细
        handleHistoryOrderDetailsCurrentChange(newPage) {
          this.historyOrderDetail.queryInfo.currentPage = newPage;
          this.getHistoryOrderDetails();
        },
        // 本月订单完成情况（饼图）
        async getMonthData() {
          const dom = document.getElementById("month");
          echarts.dispose(dom);
          let month = echarts.init(dom);
          month.showLoading(this.loadingConfig);

          const { data: { data, meta, total } } = await axios.post('../handler/board/MfgorderContainerFinishInfoDashBoard.ashx?action=getMonthData', {
            type: 'getMonthData',
            ...this.queryInfo,
            status: '全部'
          })
          month.hideLoading();
          if (meta.status === 500) { return this.$message.error(meta.msg); }
          if (data.length === 0) { return; }

          echarts.dispose(dom);
          month = echarts.init(dom);

          let option = pieOption();
          option.title.text = '月度完成情况';
          option.series[0].name = '月度完成情况';
          option.series[0].data = [
            { value: data[0]["finished"], name: '完成' },
            { value: data[0]["notfinished"], name: '未完成' }
          ];

          month.setOption(option);
          month.on('click', (params) => {
            if (params.value == 0 || params.name === '完成') { return; }
            this.thisMonthNotFinishDialogTitle = "本月未完成订单统计";
            this.thisMonthNotFinishDialogVisiable = true;
          })
        },
        // 本月未完成订单占比（饼图）
        async thisMonthNotFinishDialogOpend() {
          const dom = document.getElementById("thisMonthNotFinishChart");
          echarts.dispose(dom);
          let chart = echarts.init(dom);
          chart.showLoading(this.loadingConfig);

          const { data: { data, meta, total } } = await axios.post('../handler/board/MfgorderContainerFinishInfoDashBoard.ashx?action=getThisMonthNotFinishPieData', {
            type: 'getThisMonthNotFinishPieData',
            ...this.queryInfo,
            status: '未完成'
          })
          chart.hideLoading()
          if (meta.status === 500) { return this.$message.error(meta.msg); }
          if (data.length === 0) { return; }

          echarts.dispose(dom);
          chart = echarts.init(dom);

          let option = pieOption();
          option.color = ['#1E9FFF', 'red'];
          option.title.text = '未完成订单占比情况';
          option.series[0].name = '未完成订单占比情况';
          option.series[0].data = [
            { value: data[0]["wdl"], name: '未到料' },
            { value: data[0]["ydlwwc"], name: '已到料未完成' }
          ];
          chart.setOption(option);
          chart.on('click', (params) => {
            this.thisMonthNotFinishChartDetail.queryInfo.currentPage = 1;
            this.thisMonthNotFinishChartDetail.queryInfo.status = params.name;
            this.thisMonthNotFinishChartDetail.title = "本月未完成订单【" + params.name + "】明细";
            this.thisMonthNotFinishChartDetail.dialogVisiable = true;
            this.getThisMonthNotFinishChartDetails();
          })
        },
        // 本月未完成各条目明细--查询
        async getThisMonthNotFinishChartDetails() {
          this.loading = true;
          this.loadingText = '数据加载中...';
          const { data: { data, meta, total } } = await axios.post('../handler/board/MfgorderContainerFinishInfoDashBoard.ashx?action=getThisMonthNotFinishChartDetails', {
            type: 'getThisMonthNotFinishChartDetails',
            ...this.queryInfo,
            ...this.thisMonthNotFinishChartDetail.queryInfo
          })

          this.loading = false;
          if (meta.status === 500) { return this.$message.error(meta.msg); }
          this.thisMonthNotFinishChartDetail.dataList = data;
          this.thisMonthNotFinishChartDetail.total = total;
        },
        // 本月未完成各条目明细--导出
        exportThisMonthNotFinishChartDetails() {
          const config = {
            url: '../handler/board/MfgorderContainerFinishInfoDashBoard.ashx?action=exportThisMonthNotFinishChartDetails',
            data: {
              type: 'exportThisMonthNotFinishChartDetails',
              ...this.queryInfo,
              ...this.thisMonthNotFinishChartDetail.queryInfo
            }
          }
          exportExcelData(config, this);
        },
        // 查询遗留订单
        getHistoryOrder() {
          const historyOrderDate = this.queryInfo.historyOrderDate;
          if (historyOrderDate) {
            const days = dayjs().startOf('month').diff(dayjs(this.queryInfo.historyOrderDate[1]), 'days')
            if (days <= 0) {
              return this.$message.error('遗留订单筛选时间必须在本月之前');
            }
          }
          this.historyOrderDialogVisiable = true;
        },
        // 遗留订单统计对话框被打开时
        async historyOrderDialogOpend() {
          const dom = document.getElementById("historyOrderChart");
          echarts.dispose(dom);
          let chart = echarts.init(dom);
          chart.showLoading(this.loadingConfig);
          const { data: { data, meta, total } } = await axios.post('../handler/board/MfgorderContainerFinishInfoDashBoard.ashx?action=getHistoryOrderChart', {
            type: 'getHistoryOrderChart',
            ...this.queryInfo
          })
          chart.hideLoading();
          if (meta.status === 500) { return this.$message.error(meta.msg); }
          if (data.length === 0) { return; }

          echarts.dispose(dom);
          chart = echarts.init(dom);

          let pieData = [];
          for (const item of data) {
            pieData.push({ value: item.qty, name: item.factoryname })
          }

          let option = pieOption();
          option.series[0].data = pieData;
          option.series[0].label.formatter = '{b}: {c} ({d}%)';
          option.color = ['#0f6', '#90f', '#f60', '#f09', '#ff3', '#f33'];

          chart.setOption(option);
          chart.on('click', (params) => {
            this.historyOrderDetail.queryInfo.currentPage = 1;
            this.historyOrderDetail.queryInfo.factoryname = params.name;
            this.historyOrderDetail.title = "【" + params.name + "】遗留订单批次明细";
            this.historyOrderDetail.queryInfo.title = this.historyOrderDetail.title;
            this.historyOrderDetail.dialogVisiable = true;
            this.getHistoryOrderDetails();
          })
        },
        // 历史遗留订单(饼图明细)
        async getHistoryOrderDetails() {
          this.loading = true;
          this.loadingText = '数据加载中...';
          const { data: { data, meta, total } } = await axios.post('../handler/board/MfgorderContainerFinishInfoDashBoard.ashx?action=getHistoryOrderDetails', {
            type: 'getHistoryOrderDetails',
            ...this.historyOrderDetail.queryInfo,
            ...this.queryInfo,
            currentPage: this.historyOrderDetail.queryInfo.currentPage
          })

          this.loading = false;
          if (meta.status === 500) { return this.$message.error(meta.msg); }
          this.historyOrderDetail.dataList = data;
          this.historyOrderDetail.total = total;
        },
        // 遗留订单明细--导出
        exportHistoryOrderDetails() {
          const config = {
            url: '../handler/board/MfgorderContainerFinishInfoDashBoard.ashx?action=exportHistoryOrderDetails',
            data: {
              type: 'exportHistoryOrderDetails',
              ...this.queryInfo,
              ...this.historyOrderDetail.queryInfo
            }
          }
          exportExcelData(config, this);
        },
        // 查询本周完成情况
        async getWeekData() {
          const dom = document.getElementById("week");
          echarts.dispose(dom);
          let week = echarts.init(dom);
          week.showLoading(this.loadingConfig);
          const { data: { data, meta, total } } = await axios.post('../handler/board/MfgorderContainerFinishInfoDashBoard.ashx?action=getWeekData', {
            type: 'getWeekData',
            ...this.queryInfo,
            status: '全部',
            selecteddate: [dayjs().startOf('week').add(1, 'day').format('YYYY-MM-DD'), dayjs().endOf('week').add(1, 'day').format('YYYY-MM-DD')]
          })
          week.hideLoading();
          if (meta.status === 500) { return this.$message.error(meta.msg); }
          if (data.length === 0) { return; }

          echarts.dispose(dom);
          week = echarts.init(dom);

          let option = pieOption();
          option.title.text = '本周完成情况';
          option.series[0].name = '本周完成情况';
          option.series[0].data = [
            { value: data[0].finished, name: '完成' },
            { value: data[0].notfinished, name: '未完成' }
          ];
          week.setOption(option)
          week.on('click', (params) => {
            if (params.value == 0) { return; }
            this.thisWeek.queryInfo.currentPage = 1;
            this.thisWeek.queryInfo.status = params.name === "完成" ? "已完成" : "未完成";
            this.thisWeek.title = "本周" + this.thisWeek.queryInfo.status + "明细";
            this.thisWeek.dialogVisiable = true;
            this.getWeekDataDetail();
          })
        },
        // 查询本周完成情况明细
        async getWeekDataDetail() {
          this.loading = true;
          this.loadingText = '数据加载中...';
          const { data: { data, meta, total } } = await axios.post('../handler/board/MfgorderContainerFinishInfoDashBoard.ashx?action=getWeekDataDetail', {
            type: 'getWeekDataDetail',
            ...this.queryInfo,
            ...this.thisWeek.queryInfo,
            selecteddate: [dayjs().startOf('week').add(1, 'day').format('YYYY-MM-DD'), dayjs().endOf('week').add(1, 'day').format('YYYY-MM-DD')]
          })
          this.loading = false;
          if (meta.status === 500) { return this.$message.error(meta.msg); }
          this.thisWeek.dataList = data;
          this.thisWeek.total = total;
        },
        // 导出本周完成情况明细
        exportThisWeekDetail() {
          const config = {
            url: '../handler/board/MfgorderContainerFinishInfoDashBoard.ashx?action=exportThisWeekDetail',
            data: {
              type: 'exportThisWeekDetail',
              ...this.queryInfo,
              ...this.thisWeek.queryInfo,
              factoryid: this.queryInfo.factoryid,
              selecteddate: [dayjs().startOf('week').add(1, 'day').format('YYYY-MM-DD'), dayjs().endOf('week').add(1, 'day').format('YYYY-MM-DD')]
            }
          }
          exportExcelData(config, this);
        },
        // 今日完成情况
        async getTodayData() {
          const dom = document.getElementById("today");
          echarts.dispose(dom);
          let today = echarts.init(dom);
          today.showLoading(this.loadingConfig);
          const { data: { data, meta, total } } = await axios.post('../handler/board/MfgorderContainerFinishInfoDashBoard.ashx?action=getTodayData', {
            type: 'getTodayData',
            ...this.queryInfo
          })
          today.hideLoading();
          if (meta.status === 500) { return this.$message.error(meta.msg); }
          if (data.length === 0) { return; }

          echarts.dispose(dom);
          today = echarts.init(dom);

          let option = pieOption();
          option.title.text = '今日完成情况';
          option.series[0].name = '今日完成情况';
          option.series[0].data = [
            { value: data[0].finished, name: '完成' },
            { value: data[0].notfinished, name: '未完成' }
          ];

          today.setOption(option);
          today.on('click', (params) => {
            if (params.value == 0) { return; }
            this.todayDetail.queryInfo.currentPage = 1;
            this.todayDetail.queryInfo.iscomplete = params.name === "完成" ? "已完工" : "未完工";
            this.todayDetail.title = "今日" + this.todayDetail.queryInfo.iscomplete + "明细";
            this.todayDetail.dialogVisiable = true;
            this.getTodayDataDetail();
          })
        },
        // 今日完成情况明细
        async getTodayDataDetail() {
          this.loading = true;
          this.loadingText = '数据加载中...';
          const { data: { data, meta, total } } = await axios.post('../handler/board/MfgorderContainerFinishInfoDashBoard.ashx?action=getTodayDetail', {
            type: 'getTodayDetail',
            ...this.queryInfo,
            ...this.todayDetail.queryInfo,
            factoryid: this.queryInfo.factoryid
          })
          this.loading = false;
          if (meta.status === 500) { return this.$message.error(meta.msg); }
          this.todayDetail.dataList = data;
          this.todayDetail.total = total;
        },
        // 导出今日完成情况明细
        exportTodayDetail() {
          const config = {
            url: '../handler/board/MfgorderContainerFinishInfoDashBoard.ashx?action=exportTodayDetail',
            data: {
              type: 'exportTodayDetail',
              ...this.queryInfo,
              ...this.todayDetail.queryInfo,
              factoryid: this.queryInfo.factoryid
            }
          }
          exportExcelData(config, this);
        },
        //导出excel
        getExportExcel() {
          const config = {
            url: '../handler/board/MfgorderContainerFinishInfoDashBoard.ashx?action=exportData',
            data: {
              type: 'exportData',
              ...this.queryInfo
            }
          }
          exportExcelData(config, this);
        },
        // 排产完成率折线图
        async getStepPlanRateLine() {
          this.lineChartDialogVisiable = true;
        },
        // 排产率对话框打开时
        async lineChartDialogOpened() {
          const dom = document.getElementById("line-chart");
          echarts.dispose(dom);
          let line = echarts.init(dom);
          line.showLoading(this.loadingConfig)

          const { data: { data, meta, total } } = await axios.post('../handler/board/MfgorderContainerFinishInfoDashBoard.ashx?action=getStepPlanRateLine', {
            type: 'getStepPlanRateLine',
            ...this.queryInfo
          })
          line.hideLoading();
          if (meta.status === 500) { return this.$message.error(meta.msg); }
          if (data.length === 0) { return; }

          echarts.dispose(dom);
          line = echarts.init(dom);

          let arrDate = [], arrFinishRate = [];
          for (const i of data) {
            arrDate.push(i.plandate);
            arrFinishRate.push(i.finishrate);
          }

          let option = barOption({ themeColor: 'dark' });
          option.legend.data = ['排产完成率'];//设置图例文字
          option.xAxis.data = arrDate;
          option.yAxis[0].axisLabel.formatter = data => data + "%";
          option.yAxis[1].show = false;

          const { color, colorStops } = colorList.green;
          option.series[0] = _.merge(option.series[0], {
            name: '排产完成率',
            data: arrFinishRate,
            type: 'line',
            smooth: true,
            symbolSize: 10,
            lineStyle: { width: 3, color: color },
            label: { color: color, formatter: '{c}%' },
            itemStyle: { color: color }
          });
          line.setOption(option);
        },
        // 更新批次完成状态
        async updateContainerFinishInfo(row) {
          if (row.specrate && row.specrate >= 100) {
            return this.$message.error('批次已完工，不能刷新!');
          }
          this.loading = true;
          this.loadingText = '数据加载中...';
          const { data: { data, meta, total } } = await axios.post('../handler/board/MfgorderContainerFinishInfoDashBoard.ashx?action=updateContainerFinishInfo', {
            type: 'updateContainerFinishInfo',
            containerid: row.containerid
          })
          this.loading = false;
          if (meta.status === 500) { return this.$message.error(meta.msg); }
          this.$message.success('批次完工状态实时刷新成功!');
          const { specrate, worktimerate, status } = data[0];
          row.specrate = specrate;
          row.worktimerate = worktimerate;
          row.status = status;
        },
        handleCurrentChange(newPage) {
          this.queryInfo.currentPage = newPage;
          this.getData();
        },
        handleSizeChange(newSize) {
          this.queryInfo.pageSize = newSize;
          this.getData();
        },
        // 本周完成情况 当前页 变更
        handleThisWeekCurrentChange(newPage) {
          this.thisWeek.queryInfo.currentPage = newPage;
          this.getWeekDataDetail();
        },
        // 今日完成情况 当前页 变更
        handleTodayCurrentChange(newPage) {
          this.thisWeek.queryInfo.currentPage = newPage;
          this.getTodayDataDetail();
        },
        // 本月未完成订单统计明细
        handleThisMonthNotFinishChartDetailsCurrentChange(newPage) {
          this.thisMonthNotFinishChartDetail.queryInfo.currentPage = newPage;
          this.getThisMonthNotFinishChartDetails();
        }
      },
      async mounted() {
        let incrementNumber = () => {
          setTimeout(incrementNumber, 500);
          this.currentTime = dayjs().format('YYYY年MM月DD日  HH:mm:ss');
        }
        setTimeout(incrementNumber, 500);
        const employeeid = getParams("uid");
        const startOfMonth = dayjs().startOf('month').format('YYYY-MM-DD');
        const endOfMonth = dayjs().endOf('month').format('YYYY-MM-DD');
        this.queryInfo.today = dayjs().format('YYYY-MM-DD');
        this.queryInfo.selecteddate = [startOfMonth, endOfMonth];
        this.queryInfo.thismonth = [startOfMonth, endOfMonth];
        this.userInfo = await getUserInfo({ employeeid, isMapping: '是' });
        if (this.userInfo.factoryid) {
          this.factoryList = [{ factoryid: this.userInfo.factoryid, factoryname: this.userInfo.factoryname }];
          this.queryInfo.factoryid = this.userInfo.factoryid;
          this.workcenterList = await getWorkcenterList({ factoryid: this.userInfo.factoryid });
          this.factoryDisabled = true;
        } else {
          this.factoryList = await getFactoryListByCode({ factoryCode: '601|609|600|607|608', isMapping: '是' });
          this.factoryList.unshift({ factoryname: '全部', factoryid: '全部' });
          this.queryInfo.factoryid = '全部';
        }
        this.getData();
        this.getMonthData();
        this.getWeekData();
        this.getTodayData();
      },
      watch: { queryInfo: { handler() { this.queryInfo.currentPage = 1; }, deep: true } }
    })
  </script>
</body>

</html>